{__NOLAYOUT__}
<layout name="no_nav" />

<style type="text/css">
	.userlist {
	    padding-left: .5em;
	    padding-right: .5em;
	  }
	  .userlist-item {
	    padding: .5em 0;
	  }
	  .userlist-img {
	    width: 2.2em;
	    height: 2.2em;
	    border-radius: .3em;
	  }
	  .userlist-name {
	    margin-left: .5em;
	  }
	  .userlist .children {
	    margin-left: 2em;
	  }
	  .userlist .children .children {
	    margin-left: 2em;
	  }
	  .userlist .children .children .children {
	    margin-left: 2em;
	  }
	  .userlist .children .children .children .children {
	    margin-left: 0;
	  }
	  .userlist-info {
	    padding-bottom: .5em;
	    border-bottom: 1px solid #ccc;
	  }
	  .userlist-number {
	    text-align: right;
	    color: #999;
	  }
	  .face-bg {
	  	/*background:url( {$config.logo} ) no-repeat;*/ 
	  	background-size:cover;
	  }
</style>

<!-- TOPBAR -->
<header class="top-bar flex-row">
  <a class="row-item row-item-auto top-bar-back" href="javascript:window.history.back();">返回</a>
  <h3 class="row-item top-bar-name">我的客户</h3>
  <a class="row-item row-item-auto top-bar-menu" href="{$config.url}">主页</a>
</header>

<empty name="userList">
	<p>您还没有客户</p>
</empty>

<eq name="config.openInBrowser" value="1">

    <notempty name="userList">
    	<ul id="userList" class="userlist">
    		<volist name="userList" id="vo">
    			<li class="userlist-item" data-fid="{$vo.id}" data-sid="{$vo.cid}" data-level="1">
    				<div class="flex-row userlist-info">
    					<img class="userlist-img face-bg" src="<empty name="vo.face">{$config.logo}<else />{$vo.face}</empty>" alt="{$vo.nickname}">
    					<h5 class="userlist-name row-item">{$vo['nickname']?$vo['nickname']:'游客'}<!--<br><small>等级: {$vo.level}</small>--></h5>
    					<span class="userlist-number row-item">({$vo.subCount})</span>
    				</div>
    			</li>
    		</volist>
    	</ul>
    </notempty>

    <template id="list">
    	<ul class="children">
    		{{each extra as value i}}
    		<li class="userlist-item" data-fid="{{value.id}}" data-sid="{{value.cid}}">
    			<div class="flex-row userlist-info">
    				<img class="userlist-img face-bg" src="{{if value.face}}{{value.face}}{{else}}{$config.logo}{{/if}}" alt="{{value.nickname}}">
    				<h5 class="userlist-name row-item">{{value.nickname?value.nickname:'游客'}}<!--<br><small>等级: {{value.level}}</small>--></h5>
    				<span class="userlist-number row-item">({{value.subCount}})</span>
    			</div>
    		</li>
    		{{/each}}
    	</ul>
    </template>

<else />

    <notempty name="userList">
        <ul id="userList" class="userlist">
            <volist name="userList" id="vo">
                <li class="userlist-item" data-fid="{$vo.id}" data-sid="{$vo.cid}" data-level="1">
                    <div class="flex-row userlist-info">
                        <img class="userlist-img face-bg" src="<empty name="vo.face">{$config.logo}<else />{$vo.face}</empty>" alt="{$vo.nickname}">
                        <h5 class="userlist-name row-item">{$vo['nickname']?$vo['nickname']:'游客'}<br><small>等级: {$vo.level}</small></h5>
                        <span class="userlist-number row-item">({$vo.subCount})</span>
                    </div>
                </li>
            </volist>
        </ul>
    </notempty>
    
    <template id="list">
        <ul class="children">
            {{each extra as value i}}
            <li class="userlist-item" data-fid="{{value.id}}" data-sid="{{value.cid}}">
                <div class="flex-row userlist-info">
                    <img class="userlist-img face-bg" src="{{if value.face}}{{value.face}}{{else}}{$config.logo}{{/if}}" alt="{{value.nickname}}">
                    <h5 class="userlist-name row-item">{{value.nickname?value.nickname:'游客'}}<br><small>等级: {{value.level}}</small></h5>
                    <span class="userlist-number row-item">({{value.subCount}})</span>
                </div>
            </li>
            {{/each}}
        </ul>
</template>

</eq>


<script type="text/javascript"> 
      	$(function() {
      	    $("#userList").on("tap", ".userlist-item", function() {
      	      var children = $(this).children(".children");
      	      children.length ? $(children).toggle() : getList.call(this);
      	    });
      	
      	    function getList() {
      	      APP.showLoading();
      	
      	      var obj = {}, _this = this;
      	      obj.fid = $(this).attr("data-fid");
      	      obj.sid = $(this).attr("data-sid");
      	
      	      $.post("__CONTROLLER__/downCust", obj, function(response) {
      	        response.extra ? showList(_this, response) 
      	                       : ( APP.hideLoading(), APP.alert("该分享客户下没有其他客户") );
      	      });
      	    };
      	
      	    function showList(ele, data) {
      	      var html = "";
      	      require(["artTemplate"], function(T) {
      	        html = T("list", data);
      	        $(ele).children(".children").length || $(ele).append(html);
      	        APP.hideLoading();
      	      });
      	    };
      	  });
</script>
